<template lang="pug">
.category
  .category-section.left
    .category-section-card
      .category-section-hd
        .category-section-title 材料分类管理
        .category-section-handle
          el-button(size="small" type="primary" icon="el-icon-plus" @click="addCategory" v-if="$permission('AB-04002-001')") 新增分类
      .table
        .table-header
          .table-header-item.flex-2.flex-left 分类名称
          .table-header-item.flex-1.flex-center 分类编码
          .table-header-item.flex-1.flex-center 分类权重
          .table-header-item.flex-1.flex-left 操作
        .table-body
          .table-item(v-for="item, index in tableData")
            .table-item-wrap
              .table-item-cell.flex-2.flex-left.space-between(@click.stop="selectItem('first')")
                .table-item-value
                  .table-item-icon
                    img(src="../../static/images/folder.png")
                  .table-item-bd {{item.attr.classificationName}}
                .table-item-ft(v-if="item.showIcon")
                  .table-item-btn(@click.stop="showChildren(item)")
                    .iconfont(:class="!item.show ? 'el-icon-plus' : 'el-icon-minus'")
              .table-item-cell.flex-1.flex-center {{item.attr.classificationCode}}
              .table-item-cell.flex-1.flex-center {{item.attr.value}}
              .table-item-cell.flex-1.flex-left
                .table-item-button.normal(@click.stop="editItem('first', item)" v-if="$permission('AB-04002-002')") 编辑
                .table-item-button(@click.stop="delItem(item, index, tableData)" v-if="$permission('AB-04002-003')") 删除
            //- 二级
            .table-item-down(v-if="item.isMore")
              .table-item-down_item(v-for="tow, towIndex in item.children")
                .table-item-down_wrap
                  .table-item-cell.flex-2.flex-left.space-between.padding-left_32(@click.stop="selectItem('tow', tow)")
                    .table-item-value
                      .table-item-icon
                        img(src="../../static/images/folder.png")
                      .table-item-bd {{tow.attr.classificationName}}
                    .table-item-ft(v-if="tow.showIcon")
                      .table-item-btn(@click.stop="showChildren(tow)")
                        .iconfont(:class="!tow.show ? 'el-icon-plus' : 'el-icon-minus'")
                  .table-item-cell.flex-1.flex-center {{tow.attr.classificationCode}}
                  .table-item-cell.flex-1.flex-center {{tow.attr.value}}
                  .table-item-cell.flex-1.flex-left
                    .table-item-button.normal(@click.stop="editItem('tow', tow)" v-if="$permission('AB-04002-002')") 编辑
                    .table-item-button(@click.stop="delItem(tow, towIndex, item.children)" v-if="$permission('AB-04002-003')") 删除
                //- 三级
                .table-item-down(v-if="tow.isMore")
                  .table-item-down_item(v-for="three, threeIndex in tow.children")
                    .table-item-down_wrap
                      .table-item-cell.flex-2.flex-left.space-between.padding-left_40(@click.stop="selectItem('three', three)")
                        .table-item-value
                          .table-item-icon
                            img(src="../../static/images/folder.png")
                          .table-item-bd {{three.attr.classificationName}}
                        .table-item-ft(v-if="three.showIcon")
                          .table-item-btn(@click.stop="showChildren(three)")
                            .iconfont(:class="!three.show ? 'el-icon-plus' : 'el-icon-minus'")
                      .table-item-cell.flex-1.flex-center {{three.attr.classificationCode}}
                      .table-item-cell.flex-1.flex-center {{three.attr.value}}
                      .table-item-cell.flex-1.flex-left
                        .table-item-button.normal(@click.stop="editItem('three', three)" v-if="$permission('AB-04002-002')") 编辑
                        .table-item-button(@click.stop="delItem(three, threeIndex, tow.children)" v-if="$permission('AB-04002-003')") 删除
                    //- 四级
                    .table-item-down(v-if="three.isMore")
                      .table-item-down_item(v-for="four, fourIndex in three.children")
                        .table-item-down_wrap
                          .table-item-cell.flex-2.flex-left.space-between.padding-left_48(@click.stop="selectItem('four', four)")
                            .table-item-value
                              .table-item-icon
                                img(src="../../static/images/folder.png")
                              .table-item-bd {{four.attr.classificationName}}
                            .table-item-ft(v-if="four.showIcon")
                              .table-item-btn(@click.stop="showChildren(four)")
                                .iconfont(:class="!four.show ? 'el-icon-plus' : 'el-icon-minus'")
                          .table-item-cell.flex-1.flex-center {{four.attr.classificationCode}}
                          .table-item-cell.flex-1.flex-center {{four.attr.value}}
                          .table-item-cell.flex-1.flex-left
                            .table-item-button.normal(@click.stop="editItem('four', four)" v-if="$permission('AB-04002-002')") 编辑
                            .table-item-button(@click.stop="delItem(four, fourIndex, three.children)" v-if="$permission('AB-04002-003')") 删除
  .category-section.right(v-if="currentKey != 'first' && currentItem.attr && currentItem.attr.classificationId")
    .category-section-card
      .category-section-hd
        .category-section-title 材料属性管理
        .category-section-handle
          el-button(size="small" type="primary" icon="el-icon-plus" v-if="currentKey === 'tow' && $permission('AB-04002-004')" @click="addAttr") 添加属性
      .table
        .table-header
          .table-header-item.flex-2.flex-left 属性名称
          .table-header-item.flex-1.flex-center 属性类型
          .table-header-item.flex-1.flex-center 是否必填
          .table-header-item.flex-1.flex-left 操作
        .table-body(v-if="attrList.length")
          .table-item(v-for="item, index in attrList")
            .table-item-wrap
              .table-item-cell.flex-2.flex-left {{item.attributeName}}
              .table-item-cell.flex-1.flex-center
                .table-item-value(v-if="item.type == -1") 未填
                .table-item-value(v-if="item.type == 1") 固定属性
                .table-item-value(v-if="item.type == 2") 其他说明
              .table-item-cell.flex-1.flex-center {{item.isRequired ? '是' : '否'}}
              .table-item-cell.flex-1.flex-left
                //- .table-item-button.normal(@click="editItem(item)") 编辑
                .table-item-button(@click="delAttrItem(item, index, attrList)" v-if="$permission('AB-04002-006')") 删除
        .table-body(v-else)
          .table-item
            .table-item-wrap
              .table-item-cell.flex-1.center.border-radius 暂无数据
  category-dialog(
    :show="showCateDialog"
    :currentKey="editCurrentKey"
    :item="editCurrentItem"
    @close="closeDialog"
    @confirm="confirmDialog"
  )
  add-category-dialog(
    :show="showCategoryDialog"
    @close="closeCategoryDialog"
    @confirm="confirmCategoryDialog"
  )
  add-attr-dialog(
    :show="showAttrDialog"
    :attrList="attrList"
    :item="currentItem"
    @close="handleCloseAttr"
    @confirm="handleConfirmAttr"
  )
</template>

<script>
import { getCategoryList, deleteCategory, getAttributeList, getCateAttributeList, deleteAttribute } from 'api'
import categoryDialog from '@/components/modal/categoryDialog'
import addCategoryDialog from '@/components/modal/addCategoryDialog'
import addAttrDialog from '@/components/modal/addAttrDialog'
export default {
  name: 'materialCategory',
  data () {
    return {
      tableData: [],
      attrList: [],
      currentItem: {
        attr: {}
      },
      currentKey: '',
      showCateDialog: false,
      showCategoryDialog: false,
      showAttrDialog: false,
      editCurrentItem: {},
      editCurrentKey: ''
    }
  },
  components: {
    categoryDialog,
    addCategoryDialog,
    addAttrDialog
  },
  methods: {
    showChildren (item) {
      item.show = !item.show
      if (!item.show) this.setTableShowStatus(item.children)
      item.isMore = !item.isMore
    },
    editItem (key, item) {
      this.editCurrentItem = item
      this.editCurrentKey = key
      this.showCateDialog = true
    },
    closeDialog () {
      this.editCurrentItem = {}
      this.editCurrentKey = ''
      this.showCateDialog = false
    },
    confirmDialog (data) {
      this.tableData.forEach(item => {
        this.findItem(item, data)
      })
      this.showCateDialog = false
    },
    addCategory () {
      this.showCategoryDialog = true
    },
    closeCategoryDialog () {
      this.showCategoryDialog = false
    },
    confirmCategoryDialog () {
      this.showCategoryDialog = false
      this.getCategoryList()
    },
    addAttr () {
      this.showAttrDialog = true
    },
    handleCloseAttr () {
      this.showAttrDialog = false
    },
    handleConfirmAttr () {
      this.showAttrDialog = false
      this.getAttributeList(this.currentItem)
    },
    findItem (item, data) {
      if (item.attr.classificationId === data.classificationId) {
        item.attr.classificationName = data.classificationName
        item.attr.value = data.value
        if (data.key === 'first') item.attr.classificationCode = data.classificationCode
        return item
      } else {
        if (item.children && item.children.length) {
          item.children.forEach(row => {
            let col = this.findItem(row, data)
            if (col) return col
          })
        }
      }
    },
    delAttrItem (item, index, arr) {
      this.$confirm('确定要删除该属性吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          await this.$axios.post(deleteAttribute, { classificationId: item.classificationId, attributeId: item.attributeId })
          this.$message.success('删除成功!')
          arr.splice(index, 1)
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    delItem (item, index, arr) {
      this.$confirm('确定要删除该分类及所有子分类吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          await this.$axios.post(deleteCategory, { classificationId: item.attr.classificationId })
          this.$message.success('删除成功!')
          arr.splice(index, 1)
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    selectItem (key, item = {}) {
      this.currentKey = key
      this.currentItem = item
      if (key !== 'first') this.getAttributeList(item)
    },
    async getAttributeList (item) {
      try {
        const { ResultSet } = await this.$axios.post(getCateAttributeList, { classificationId: item.attr.classificationId })
        this.attrList = ResultSet.Result
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getCategoryList () {
      try {
        const { ResultSet } = await this.$axios.post(getCategoryList)
        this.setTableData(ResultSet.userData.result)
        this.tableData = ResultSet.userData.result
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    setTableShowStatus (arr) {
      arr.forEach(item => {
        item.show = false
        item.isMore = false
        if (item.children && item.children.length) this.setTableShowStatus(item.children)
      })
    },
    setTableData (arr) {
      arr.forEach(item => {
        item.show = false
        if (item.children && item.children.length) {
          item.showIcon = true
          item.isMore = false
          this.setTableData(item.children)
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getCategoryList()
    })
  }
} 
</script>

<style lang="scss" scoped>
.category {
  display: flex;
  height: 100%;
}
.category-section {
  width: 50%;
  height: 100%;
  
  &.left {
    padding-right: 8px;
  }
  &.right {
    padding-left: 8px;
  }
  .category-section-card {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #F3F3F4;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #F3F3F4;
    border-radius: 10px;
    padding: 20px 40px;
    overflow: auto;
  }
}
.category-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  .category-section-title {
    font-size: 16px;
    line-height: 24px;
    color: #3E4373;
  }
}
.table {
  border-radius: 10px;
  .table-header {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    .table-header-item {
      display: flex;
      align-items: center;
      background: linear-gradient(0deg, #F8F7FC, #F8F7FC), #F8F7FC;
      border: 1px solid #EDEDED;
      border-right: none;
      line-height: 22px;
      padding: 13px 24px;
      color: #64698F;
      &:first-child {
        border-radius: 10px 0 0 0;
      }
      &:last-child {
        border-right: 1px solid #EDEDED;
        border-radius: 0 10px 0 0;
      }
      .el-icon-question {
        margin-left: 10px;
        font-size: 16px;
      }
    }
  }
  .table-body {
    width: 100%;
    .table-item-cell {
      height: 56px;
      padding: 17px 24px;
      border: 1px solid #EDEDED;
      border-right: none;
      border-top: none;
      display: flex;
      align-items: center;
      font-size: 16px;
      line-height: 24px;
      color: #3E4373;
      cursor: pointer;
      &:last-child {
        border-right: 1px solid #EDEDED;
      }
      &.space-between {
        justify-content: space-between;
      }
      &.padding-left_32 {
        .table-item-value {
          margin-left: 32px;
        }
      }
      &.padding-left_40 {
        .table-item-value {
          margin-left: 40px;
        }
      }
      &.padding-left_48 {
        .table-item-value {
          margin-left: 48px;
        }
      }
      &.center {
        justify-content: center;
      }
    }
    .table-item-icon {
      width: 24px;
      margin-right: 8px;
    }
    .table-item {
      .table-item-wrap {
        display: flex;
        align-items: center;
      }
      &:first-child {
        .table-item-cell {}
      }
      &:last-child {
        .table-item-cell {
          &:first-child {
            border-radius: 0 0 0 10px;
          }
          &:last-child {
            border-radius: 0 0 10px 0;
            &.border-radius {
              border-radius: 0 0 10px 10px;
            }
          }
        }
      }
      .table-item-value {
        display: flex;
        align-items: center;
      }
      .table-item-btn {
        width: 18px;
        height: 18px;
        background: #EDEDED;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .iconfont {
          font-size: 12px;
          font-weight: bold;
          color: #B2B4C7;
        }
      }
    }
  }
}
.table-item-down_wrap {
  display: flex;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-left {
  justify-content: flex-start;
}
.flex-center {
  justify-content: center;
}
.flex-right {
  justify-content: flex-end;
}
.table-item-button {
  padding: 5px 8px;
  background: #F6F6F9;
  border-radius: 6px;
  margin-right: 8px;
  font-size: 12px;
  line-height: 20px;
  color: #3E4373;
  cursor: pointer;
  &.normal {
    background: #F3F0FF;
    color: #7362F0;
  }
}
</style>
